<template>
  <div>
    <div class="diagnose_6">
      <div class="diagnose_6_title">
        <div class="diagnose_6_icon"></div>
        <div class="diagnose_6_title_name">A活动(1对N)运营</div>
      </div>
      <diagnose6a ref="refDiagnose6a"></diagnose6a>
    </div>
    <div class="diagnose_6">
      <div class="diagnose_6_title">
        <div class="diagnose_6_icon"></div>
        <div class="diagnose_6_title_name">B离院(1对1)运营</div>
      </div>
      <diagnose6b ref="refDiagnose6b"></diagnose6b>
    </div>
    <div class="diagnose_6">
      <div class="diagnose_6_title">
        <div class="diagnose_6_icon"></div>
        <div class="diagnose_6_title_name">C到院(1对1)运营</div>
      </div>
      <diagnose6c ref="refDiagnose6c"></diagnose6c>
    </div>
  </div>
</template>

<script>
// 引入自定义组件
import Diagnose6a from './diagnose6a.vue';
import Diagnose6b from './diagnose6b.vue';
import Diagnose6c from './diagnose6c.vue';
// 引入第三方组件
import { mapGetters } from 'vuex';

export default {
  name: 'Diagnose6',
  components: {
    ['diagnose6a']: Diagnose6a,
    ['diagnose6b']: Diagnose6b,
    ['diagnose6c']: Diagnose6c,
  },
  data() {
    return {
      salon: {},
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadTabData('a');
      this.loadTabData('b');
      this.loadTabData('c');
    },
    loadTabData: async function (tabId) {
      const refName = `refDiagnose6${tabId}`;
      const refTab = this.$refs[refName];
      if (refTab) {
        const cpy = Object.assign({}, this.salon);
        refTab.loadDiagnoseData(cpy);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.diagnose_6 {
  width: 100%;
  padding: 0 0 10px 0;
  display: block;

  .diagnose_6_title {
    padding: 0 0 10px 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .diagnose_6_icon {
      width: 2px;
      height: 16px;
      border: 2px solid #724eff;
      margin-right: 11px;
    }

    .diagnose_6_title_name {
      margin: 0 20px 0 0;
      font-weight: 700;
      color: #606266;
    }
  }
}
</style>
